<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="csrf-token" content="{{csrf_token()}}">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />

    <link rel="stylesheet" href="{{URL::asset('resources/xadmin/css/font.css')}}">
    <link rel="stylesheet" href="{{URL::asset('resources/xadmin/css/xadmin.css')}}">
    <link rel="stylesheet" href="{{URL::asset('resources/xadmin/lib/layui/css/layui.css')}}">


    <script src="{{URL::asset('resources/xadmin/lib/layui/layui.js')}}" charset="utf-8"></script>
    <script type="text/javascript" src="{{URL::asset('resources/xadmin/js/xadmin.js')}}"></script>
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">管理员管理</a>
            <a>
              <cite>管理员列表</cite></a>
          </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5">
                        <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input"  autocomplete="off" placeholder="开始日" name="start" id="start">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input"  autocomplete="off" placeholder="截止日" name="end" id="end">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <input type="text" name="username"  placeholder="请输入用户名" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn"  lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
                        </div>
                    </form>

                </div>
               <!--  <div class="layui-card-header" style="display:none" id="hear_bar">
                    <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除</button>
                    <button class="layui-btn" onclick="xadmin.open('添加用户','./admin-add.html',600,400)"><i class="layui-icon"></i>添加</button>
                </div> -->
                <div style="display:none" id="hear_bar">
                    <button class="layui-btn layui-btn-danger" lay-event="delall"><i class="layui-icon"></i>批量删除</button>
                    <button class="layui-btn" lay-event="add" ><i class="layui-icon"></i>添加</button>
                </div>

                <div class="layui-card-body ">
                    <table class="layui-hide" id="manager_table" lay-filter="manager_table"></table>
                </div>

                <div style="display:none" id="userBar">
                    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                </div>
                

            </div>
        </div>
    </div>
</div>
</body>
<script>

layui.use('jquery', function(){
    $=layui.jquery;
    var dom = $("<div id='showalladdableavms' style='display:none;width:100%'><table id='test3' lay-filter='test'></table></div>");
    $('body').append(dom);
});


    layui.use('table', function(){
        var table = layui.table;

        table.render({
            elem: '#manager_table'
            ,page: true //开启分页
            ,toolbar: '#hear_bar'
            ,url:'{{URL::action('Admin\ManagerController@lst')}}'
            ,request: {
                pageName: 'curr' //页码的参数名称，默认：page
                ,limitName: 'nums' //每页数据量的参数名，默认：limit
            }
            ,method: 'post'
            ,headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
            ,cellMinWidth: 80
            ,parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": res.sta, //解析接口状态
                    "msg": res.mess, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": res.data //解析数据列表
                };
            }
            ,cols: [[
                 {type:'checkbox'}
                ,{field:'id', title: 'ID', sort: true,width:70}
                ,{field:'username', title: '登录名',width:130}
                ,{field:'gender',title: '性别', sort: true,width:75,templet:function(d){
                    if(d.gender=='1')d.gender='男'
                    else if(d.gender=='2')d.gender='女'
                    else d.gender='保密'
                    return d.gender
                }}
                ,{field:'mobile',title: '联系方式'}
                ,{field:'email', title: '邮箱', minWidth:150}
                ,{field:'role_id', title: '角色',width:150, sort: true}
                ,{field:'created_at',title: '加入时间', sort: true}
                ,{field:'status', title: '状态',templet:function(d){
                    if(d.status=='1')d.status='未启用'
                    else if(d.status=='2')d.status='已启用'
                    return d.status
                }}
                ,{fixed: 'right', title:'操作', toolbar: '#userBar', width:150,align:'center'}
            ]]

        });

     //监听头部工具栏事件
    table.on("toolbar(manager_table)",function(obj){
        var checkStatus = table.checkStatus('manager_table')
        
        switch(obj.event){
            case 'add':
            //layer.msg('add');
            xadmin.open('添加用户','{{url('admin/manager/add')}}',700,500)
            break;
            case 'delall':
            //layer.msg('delall');console.log(checkStatus.data);console.log(checkStatus.data.length)
                var ids = [];
                num=checkStatus.data.length
                if (num != 0) {

                            for (var i = 0; i < num; i++) {
                            ids.push(checkStatus.data[i].id)
                        }
                        layer.confirm('真的删除吗？',{
                            icon:3,
                            skin: 'layer-ext-moon',
                            btn: ['确认','返回'], //按钮
                        },function(){

                    $.ajax({
                        url: '{{URL::action('Admin\ManagerController@del')}}'
                        ,type: 'post'
                        ,headers : {
                            'X-CSRF-TOKEN' : $("meta[name='csrf-token']").attr('content')
                        }
                        ,data:{del_id:ids,del_num:'several'}
                        , success: function (data) {
                            if(data.status=='ok'){                                
                                layer.msg("删除了" +data.nums+"条数据",{
                                icon:6,//成功的表情
                                time:1000
                            },function(){
                                
                               //obj.del();
                               $(".layui-form-checked").not('.header').parents('tr').remove();

                            });
                                
                            }else{
                                layer.msg('Error',{
                                icon:5//失败的表情
                                ,time:1000
                                })
                            }
                           
                        }
                    })

                        })
                }
                else {
                    layer.msg("至少选择一个！")
                }
                //break;
            break;
            
        }
    });
    //监听复选框
    // table.on('checkbox(manager_table)', function(obj){ //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
    //     console.log(obj.checked); //当前是否选中状态
    //     console.log(obj.data); //选中行的相关数据
    //     console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
    // });
    //监听工具条
    table.on('tool(manager_table)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        var data = obj.data; //获得当前行数据
        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
        // 获取所在行的id
         console.log(data['id'])
        console.log(obj);
        if(layEvent === 'del'){ //删除
            
            layer.confirm('真的删除吗？',{
                icon:3,
                skin: 'layer-ext-moon',
                btn: ['确认','返回'], //按钮
            },function(){
                $.ajax({
                    url:'{{URL::action('Admin\ManagerController@del')}}',
                    type:'post',
                    data:{del_id:data['id'],del_num:'one'},
                    headers : {
                    'X-CSRF-TOKEN' : $("meta[name='csrf-token']").attr('content')
                    },
                    beforeSend:function () {
                        this.layerIndex = layer.load(0, { shade: [0.5, '#393D49'] });
                    },
                    success:function(data){
                        if(data.status=='error'){
                            layer.msg('Error',{
                                icon:5//失败的表情
                                ,time:1000
                            })
                            //return ;
                        }else{
                            layer.msg('Successful Delete!',{
                                icon:6,//成功的表情
                                time:1000
                            },function(){
                               // location.reload();
                               obj.del();
                               
                            });
                        }
                    },
                    complete:function(){
                        layer.close(this.layerIndex);
                    }
                })
            })
        } else if(layEvent === 'edit'){ //编辑
            console.log(data['id']) //获取要修改行的ID

            

            // var baseUrl = 'www.google.com'
            // var a = 1, b = 'request', c = true
            // var finalUrl = baseUrl + '?a=' + a + '&b=' + b + '&c=' + c
            // console.log(finalUrl)
            var edit_id=data['id'];      
            //var Url='\{\{url(\'admin\/manager\/edit\',[\'id\'=>'+edit_id+'])}}'
           //console.log(Url)
           //var lara_Url='\{\{url(\'admin\/manager\/edit\/'+edit_id+')}}'
         

            //js先得到本机IP，解决ip不同资源访问失败bug，
            //用laravel框架自带的方法是没有问题的，这里比较特殊
            //localhostPath--->http://192.168.0.106
            var curWwwPath = window.document.location.href;
            var pathname= window.document.location.pathname;
            var pos = curWwwPath.indexOf(pathname);
            var localhostPath = curWwwPath .substring(0,pos);
           // layer.alert(localhostPath)

            var URL=localhostPath+'/lhlsite/laravel/public/admin/manager/edit/'+edit_id
            //var url='http://192.168.0.106/laravel/public/admin/manager/edit/'+edit_id
            console.log(URL)
            xadmin.open('修改信息',URL,800,500);

            //layer.msg('edit')
            //同步更新缓存对应的值
            obj.update({
            
            // username: '123'
            // ,title: 'xxx'
            });
        } 
    });
      


    });


    /*用户-停用*/
    function member_stop(obj,id){
        layer.confirm('确认要停用吗？',function(index){

            if($(obj).attr('title')=='启用'){

                //发异步把用户状态进行更改
                $(obj).attr('title','停用')
                $(obj).find('i').html('&#xe62f;');

                $(obj).parents("tr").find(".td-status").find('span').addClass('layui-btn-disabled').html('已停用');
                layer.msg('已停用!',{icon: 5,time:1000});

            }else{
                $(obj).attr('title','启用')
                $(obj).find('i').html('&#xe601;');

                $(obj).parents("tr").find(".td-status").find('span').removeClass('layui-btn-disabled').html('已启用');
                layer.msg('已启用!',{icon: 5,time:1000});
            }

        });
    }





</script>

</html>